<!-- 积分余额 -->
<template>
	<view class="page_box">
		<view class="head_box">
			<!-- <cu-custom :isBack="true">
				<block slot="backText">积分余额</block>
				<block slot="content"></block>
			</cu-custom> -->
			<image class="bg" :src="$IMG_URL + '/imgs/user/integral_bg.png'" mode=""></image>
			<view class="all-box x-c">
				<view class="all-num flex ">
					<!-- <text class="all-title">当前积分</text> -->
					<text class="text-lg">{{ title }}: {{ data.money }}</text>
				</view>
				<!-- <text class="all-title">当前积分</text> -->
			</view>
			<view class="card-box  " v-if="0">
				<button class="cu-btn cash-btn1 flex justify-center" @tap="onWithdrawals1"><text>积分转账</text></button>
			</view>
			<view class="tab-box x-f">
				<view class="tab-item y-f " @tap="onTab('all')"><text class="tab-name" :class="{ 'tab-active': tabDot === 'all' }">全部</text></view>
				<view v-if="0" class="tab-item y-f " @tap="onTab('add')">
					<text class="tab-name" :class="{ 'tab-active': tabDot === 'add' }">收入</text>
				</view>
				<view class="tab-item y-f " @tap="onTab('reduce')" v-if="0">
					<text class="tab-name" :class="{ 'tab-active': tabDot === 'reduce' }">支出</text>
				</view>
			</view>
		</view>
		<shopro-modal v-model="showModal1" style="z-index: 88;">
			<block slot="modalContent">
				<view class="modal-box">
					<view class="modal-head">
						<image class="modal-head-img" src="http://shopro.7wpp.com/imgs/modal_bg.png" mode=""></image>
						<text class="modal-head-title">转增积分</text>
					</view>
					<input class="inp" type="number" v-model="score1" placeholder="请输入转增积分" placeholder-class="pl-inp" />
					<input class="inp" type="number" v-model="mobile" placeholder="请输入转增接收手机号码" placeholder-class="pl-inp" />

					<button class="cu-btn post-btn" @tap="postMoney1">转增</button>
				</view>
			</block>
		</shopro-modal>
		<view class="content_box">
			<scroll-view scroll-y="true" @scrolltolower="loadMore" class="scroll-box">
				<view class="item-box x-bc" v-for="log in data.list" :key="log.id">
					<view class="flex align-center">
						<!-- <view class="name">{{ log.type_name }}</view> -->

						<image :src="log.avatar" mode="aspectFill" class="round" style="width: 70rpx; height: 70rpx;"></image>
						<view class="time margin-left">{{ timestamp(log.createtime) }}</view>
					</view>
					<view class="num" v-if="log.wallet >= 0">{{ log.wallet }}</view>
					<view class="num" v-else>{{ log.wallet }}</view>
				</view>
				<!-- 更多 -->
				<u-loadmore v-if="scoreLog.length" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
			</scroll-view>
		</view>
		<view class="foot_box"></view>
		<!-- 自定义底部导航 -->
		<shopro-tabbar></shopro-tabbar>
		<!-- 关注弹窗 -->
		<shopro-float-btn></shopro-float-btn>
		<!-- 连续弹窗提醒 -->
		<shopro-notice-modal></shopro-notice-modal>
	</view>
</template>

<script>
import { mapMutations, mapActions, mapState } from 'vuex';
export default {
	components: {},
	data() {
		return {
			tabDot: 'all',
			scoreLog: [],
			timestamp: this.$tools.timestamp,
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			currentPage: 1,
			lastPage: 1,
			showModal1: false,
			score1: '',
			mobile: '',
			viewId: '',
			data: {},
			title: '',
		};
	},
	computed: {
		...mapState({
			score: state => state.user.userInfo.score,
		}),
	},
	onLoad() {
		this.viewId = this.$Route.query.id;
		console.log('this.viewId  :>> ', this.viewId);
		if (this.viewId == 1) {
			uni.setNavigationBarTitle({
				title: '直推奖流水',
			});
			this.title = '直推奖';
			this.get();
		} else if (this.viewId == 2) {
			uni.setNavigationBarTitle({
				title: '管理奖流水',
			});
			this.title = '管理奖';
			this.get1();
		} else {
			uni.setNavigationBarTitle({
				title: '间推奖流水',
			});
			this.title = '间推奖';
			this.get2();
		}
	},
	methods: {
		get() {
			let that = this;
			that.$api('zhitui')
				.then(res => {
					this.data = res.data;

					console.log('result11111111111 :>> ', result);
				})
				.catch(err => {});
		},
		get1() {
			let that = this;
			that.$api('gunali')
				.then(res => {
					this.data = res.data;
					console.log('result11111111111 :>> ', result);
				})
				.catch(err => {});
		},
		get2() {
			let that = this;
			that.$api('jianjie')
				.then(res => {
					this.data = res.data;
					console.log('result11111111111 :>> ', result);
				})
				.catch(err => {});
		},

		apply1() {
			let that = this;
			if ([this.score1, this.mobile].includes('')) {
				return this.$tools.toast('请填写全部信息');
			}
			that.$api('transfer', {
				money: that.score1,
				mobile: that.mobile,
			}).then(res => {
				if (res.code === 1) {
					//  #ifdef MP-WEIXIN
					this.$store.dispatch('getMessageIds', 'wallet');
					//  #endif
					this.$tools.toast(res.msg);
					setTimeout(() => {
						this.jump('/pages/index/user');
					}, 1500);
				}
				// this.score();
				[this.score1, this.mobile] = '';
			});
		},
		postMoney1() {
			this.apply1();
			this.showModal1 = false;
		},
		loadMore() {
			if (this.currentPage < this.lastPage) {
				this.currentPage += 1;
				this.getScoreLog();
			}
		},
		onTab(type) {
			this.tabDot = type;
			this.scoreLog = [];
			this.currentPage = 1;
			this.$u.debounce(this.getScoreLog);
		},
		onWithdrawals1() {
			if (this.score <= 0) {
				this.$tools.toast('暂无可提现积分');
			} else {
				this.showModal1 = true;
			}
		},
		// 积分明细
		getScoreLog(type) {
			let that = this;
			that.loadStatus = 'loading';
			that.$api('user_wallet_log', {
				wallet_type: 'score ',
				status: that.tabDot,
				page: that.currentPage,
			}).then(res => {
				if (res.code === 1) {
					that.scoreLog = [...that.scoreLog, ...res.data.data];
					that.lastPage = res.data.last_page;
					if (that.currentPage < res.data.last_page) {
						that.loadStatus = 'loadmore';
					} else {
						that.loadStatus = 'nomore';
					}
				}
			});
		},
	},
};
</script>

<style lang="scss">
.modal-box {
	background: #fff;
	width: 610rpx;
	margin: 0 auto;
	border-radius: 20rpx;
	.modal-head-img {
		width: 100%;
		height: 213rpx;
	}

	.modal-head-title {
		font-size: 35rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #6d5028;
		line-height: 42rpx;
	}

	.inp {
		width: 501rpx;
		height: 78rpx;
		border: 1rpx solid rgba(168, 112, 13, 1);
		// margin: 60rpx auto 40rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #6d5028;

		.pl-inp {
			color: #bd9560;
		}
	}

	.radio {
		width: 500rpx;
		padding: 0 50rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(200, 150, 61, 1);
		margin-bottom: 20rpx;

		.radio-inp {
			transform: scale(0.7);
			margin-right: 10rpx;
		}
	}

	.post-btn {
		width: 492rpx;
		height: 70rpx;
		background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
		box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
		border-radius: 35rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		padding: 0;
		margin-bottom: 60rpx;
		margin-top: 30rpx;
	}
}
.scroll-box {
	flex: 1;
	height: 100%;
	padding: 0 30rpx;
}
.cash-btn1 {
	position: absolute;
	left: 50%;
	bottom: 150rpx;
	transform: translateX(-50%);
	width: 180rpx;
	height: 60rpx;
	background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
	border: 2rpx solid rgba(230, 184, 115, 1);
	box-shadow: 0px 7px 6px 0px rgba(229, 138, 0, 0.22);
	border-radius: 32rpx;
	padding: 0;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 600;
	color: rgba(51, 51, 51, 1);
}
.page_box {
	background: #fff;
	.head_box {
		width: 750rpx;
		height: 450rpx;
		background: linear-gradient(180deg, rgba(239, 196, 128, 1) 0%, rgba(248, 220, 165, 1) 56.99999999999999%, rgba(255, 255, 255, 1) 100%);
		position: relative;
		.bg {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 310rpx;
			height: 310rpx;
		}
		.all-box {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -70%);

			height: 180rpx;
			.all-num {
				font-size: 50rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #a8700d;
				margin-bottom: 20rpx;
			}
			.all-title {
				position: absolute;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(168, 112, 13, 1);
				line-height: 54rpx;
				text-align: center;
				width: 154rpx;
				height: 53rpx;
				background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
				border-radius: 27rpx;
				bottom: -16rpx;
			}
		}
		.tab-box {
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
			width: 710rpx;
			height: 90rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 30rpx 30rpx 0px 0px;
			border-bottom: 1rpx solid #dfdfdf;
			padding: 0 30rpx;
			.tab-item {
				flex: 1;
				.tab-name {
					font-size: 30rpx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					border-bottom: 4rpx solid transparent;
					line-height: 86rpx;
				}
				.tab-active {
					border-bottom: 4rpx solid rgba(213, 166, 90, 1);
				}
			}
		}
	}
}
.item-box {
	background: #fff;
	min-height: 150rpx;
	border-bottom: 1rpx solid #dfdfdf;
	padding: 30rpx;
	.name {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		line-height: 28rpx;
		margin-bottom: 20rpx;
	}
	.time {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(196, 196, 196, 1);
		line-height: 24px;
	}
	.num {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #e6b873;
	}
}
</style>
